<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="utf-8">
		<title>实验5：图片的DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			fieldset p{width: 225px;word-wrap:break-word;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
</head>
<body>
		<div id="cont_left">
			<ul><img src="images/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li><img src="images/doc.gif">获取原始图片路径</li>
					<li><img src="images/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="images/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li><img src="images/doc.gif">创建图片</li>
					<li><img src="images/doc.gif">克隆图片</li>
					<li><img src="images/doc.gif">改变图片</li>
					<li><img src="images/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="images/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
                    <!-- <li><img src="images/doc.gif">为原始图片加上行间样式</li> -->
					<li  onclick = "change()"><img src="images/doc.gif">为原始图片加上行间样式</li>
					<li><img src="images/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="images/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"> </div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
			function show(item) {
				let currentMenu = document.getElementById(item);
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}	
            /*  189000526-谭静  */
            //获取原始图片路径
            //let i = 0;	
            let fruit = document.querySelector('#fruit');
            let msg1 = document.querySelector('#msg1');	
            let menu1 = document.querySelectorAll('#menu1>li');//获取menu1下的所有li标签
            menu1[0].addEventListener("click",function(){
                msg1.innerHTML = fruit.src;
            });

            //获取我喜欢的水果
            menu1[1].addEventListener("click",function(){
                let msg2 = document.querySelector('#msg2');
                let enjoy = document.getElementsByName('enjoy');
                let str = '';
                for(var i in enjoy){
                    if(enjoy[i].checked){//如果input标签存在checked这个属性，则获取相对应的value
                        str = str + enjoy[i].value + '&nbsp&nbsp';//将选中的水果形成一个字符串
                  }
                }
                msg2.innerHTML = '我喜欢的水果有：' + str;
            });

            
            let menu2 = document.querySelectorAll('#menu2>li');//获取menu2下的所有li标签
            //创建图片
            let i = 1;
            let j = 1;
            let msg3 = document.querySelector('#msg3');//为后面添加图片标签做准备
            menu2[0].addEventListener("click",function(){
                let img3 = document.createElement('img');//创建img标签
                img3.src = "images/grape.jpg";
                if(i == 1){//只允许创建一张
                    msg3.appendChild(img3);
                    i = 0;
                }else{
                    alert('您已创建图片！');
                }
            });
            //克隆图片
            menu2[1].addEventListener("click",function(){
                let p = document.querySelector('#fruit');
                console.log(p);
                let msg4 = document.querySelector('#msg4');
                let msg4_1 = document.createElement('img');
                if(j == 1){
                    msg4.appendChild(msg4_1);
                    msg4_1.src = p.src;
                    j = 0;
                }else{
                    alert('您已成功克隆！');
                }
            });

            //改变图片
            let a = 1;
            menu2[2].addEventListener("click",function(){
                if(a == 1){
                    fruit.src = "images/grape.jpg";
                    a = 0;
                }else{
                    fruit.src = "images/fruit.jpg";
                    a = 1;
                }
            });
            //删除图片
            menu2[3].addEventListener("click",function(e){
                let msg3_1 = document.querySelector('#msg3');
                if(msg3_1.children.length == 0){//判断msg3是否有子节点
                    alert('没有可删除的图片！');
                }else{
                    let pic = document.querySelector('#msg3>img');//获取img
                    pic.remove();//删除图片
                    alert('删除成功');
                }
            });

            //给原始图片加上行间样式
            // let menu3 = document.querySelectorAll('#menu3>li');//获取menu3下的所有li标签
            // menu3[0].addEventListener("click",function(){
            //     fruit.style.border = "4px solid green";
            // });
            //HTML内联属性
              function change(){
                fruit.style.border = "4px solid green";
              }



            //加上内部样式
            // menu3[1].addEventListener("click",function(){
            //     let fieldset = document.getElementsByTagName('fieldset');
            //     for(var k in fieldset){
            //         fieldset[k].style.backgroundColor = "gray";
            //     }
            // });
		</script>
</body>
</html>